<template>
    <div>
       
        <el-scrollbar>
            <el-menu
            :default-openeds="['1','2','3']"
            style="min-height: 100%"
            background-color="rgb(48,65,86)"
            text-color="#FFF"
            active-text-color="#ffd04b"
            :collapse-transition="false"
            :collapse="isCollapse"
            router
            >
            <div style="height: 60px; line-height: 60px; text-align: center">
                <img
                src="../../public/favicon.ico"
                alt=""
                style="
                    width: 20px;
                    position: relative;
                    top: 5px;
                    margin-right: 5px;
                "
                />
                <b style="color: white" v-show="logoTextShow">棋牌室后台系统</b>
            </div>

            <el-menu-item index="/"><el-icon><House /></el-icon><template #title>主页</template></el-menu-item>
             <el-sub-menu index="1">
                <template #title>
                <el-icon><User /></el-icon>
                <span>用户模块</span>
                </template>
                <el-menu-item-group>
                <el-menu-item index="/user"><el-icon><User /></el-icon>用户管理</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="2">
                <template #title>
                <el-icon><Shop /></el-icon>
                <span>商家模块</span>
                </template>
                <el-menu-item-group>
                <el-menu-item index="/order"><el-icon><List /></el-icon>订单模块</el-menu-item>
                <el-menu-item index="/notice"><el-icon><DataBoard /></el-icon>公告栏管理</el-menu-item>
                <el-menu-item index="/room"><el-icon><HomeFilled /></el-icon>棋牌室管理</el-menu-item>
                <el-menu-item index="/condition"><el-icon><MostlyCloudy /></el-icon>空调管理</el-menu-item>
                <el-menu-item index="/merchant"><el-icon><Shop /></el-icon>商家信息</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="3">
                <template #title>
                    <el-icon><Comment /></el-icon>
                    <span>牌友圈模块</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/remark"><el-icon><Comment /></el-icon>评论模块</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu disabled index="4">
                <template #title>
                <el-icon><Menu /></el-icon>
                <span>系统管理</span>
                </template>
                <el-menu-item-group>
                <!-- <el-menu-item index="/order"><el-icon><Order /></el-icon>订单模块</el-menu-item>
                <el-menu-item index="/chessFriends"><el-icon><User /></el-icon>牌友圈模块</el-menu-item>
                <el-menu-item index="/notice"><el-icon><User /></el-icon>公告栏管理</el-menu-item>
                <el-menu-item index="/merchant"><el-icon><User /></el-icon>商家管理</el-menu-item>
                <el-menu-item index="/user"><el-icon><User /></el-icon>用户管理</el-menu-item> -->
                <el-menu-item disabled index="/file"><el-icon><Document /></el-icon>文件管理</el-menu-item>
                <el-menu-item disabled index="/role"><el-icon><User /></el-icon>角色管理</el-menu-item>
                 <el-menu-item disabled index="/menu"><el-icon><Menu /></el-icon>菜单管理</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
            
            <!-- <div v-for="item in menus" :key="item.id">
                <div v-if="item.path">
                    <el-menu-item :index="item.path">
                     <el-icon>
                        <component :is="item.icon" />
                    </el-icon>
                    {{ item.name }}
                    </el-menu-item>
                </div>
                <div v-else>
                    <el-sub-menu :index="item.id + ''">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon" />
                        </el-icon>
                        <span >{{ item.name }}</span>
                    </template>
                    <div  v-for="subItem in item.children" :key="subItem.id">
                        <el-menu-item :index="subItem.path">
                            <el-icon>
                                <component :is="subItem.icon" />
                            </el-icon>
                        <span >{{ subItem.name }}</span>
                        </el-menu-item>
                    </div>
                    </el-sub-menu>
                </div>
            </div> -->
         
            </el-menu>
        </el-scrollbar>
       
    </div>
  
</template>

<script>
export default {
    name:'Aside',
    props:{
        isCollapse: Boolean,
        logoTextShow: Boolean,
    },
    data(){
        return{
            menus: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")) : [],
            opens: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")).map(v => v.id + '') : []

        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
       
    },
}
</script>

<style>

</style>